<template>
  <div class="rank_container">
    <div class="title"></div>
    <div class="box" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const charts = ref<HTMLElement | null>(null)

onMounted(() => {
  if (charts.value) {
    const myChart = echarts.init(charts.value)

    const xData = [
      '01-01',
      '01-02',
      '01-03',
      '01-04',
      '01-05',
      '01-06',
      '01-07',
    ]
    const yData = [320, 450, 200, 500, 400, 350, 210]

    myChart.setOption({
      xAxis: {
        type: 'category',
        data: xData,
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: '#C8E0F7',
          fontSize: 12,
        },
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 500,
        interval: 100,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#405387',
          },
        },
        axisLabel: {
          interval: 0,
          color: '#C8E0F7',
          fontSize: 12,
        },
      },
      grid: {
        left: 41,
        bottom: 25,
        right: 20,
      },
      series: [
        {
          type: 'custom',
          renderItem: (params: any, api: any) => {
            const categoryIndex = api.value(0)
            const start = api.coord([api.value(0), 0])
            const end = api.coord([api.value(0), api.value(1)])
            const barWidth = api.size([1, 0])[0] * 0.5

            const points = [
              [start[0] - barWidth / 2, start[1]],
              [start[0] + barWidth / 2, start[1]],
              [end[0], end[1]],
            ]
            // 定义线性渐变颜色
            // 定义线性渐变颜色
            const gradientColor = {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.02,
                  color: 'rgba(88, 225, 219, 0.18)',
                },
                {
                  offset: 0.25,
                  color: '#58E1DB',
                },
                {
                  offset: 0.59,
                  color: '#2552AF',
                },
                {
                  offset: 0.75,
                  color: '#1525A1',
                },
                {
                  offset: 1,
                  color: 'rgba(13, 26, 75, 0.2)',
                },
              ],
            }
            return {
              type: 'polygon',
              shape: {
                points,
              },
              style: {
                fill: '#0195F7',
                stroke: '#0195F7',
                lineWidth: 1,
              },
            }
          },
          data: xData.map((_, index) => [index, yData[index]]),
        },
      ],
    })
  }
})
</script>

<style lang="scss" scoped>
.rank_container {
  display: flex;
  flex-direction: column;
  .title {
    margin-left: 14px;
    width: 528px;
    height: 56px;
    background: url(../../../../assets/svg/tiebiao.svg) no-repeat;
  }
  .box {
    width: 463px;
    height: 225px;
    background: linear-gradient(
      152deg,
      rgba(12, 50, 109, 0.72) 0%,
      #051b3b 100%
    );
    margin-left: 46px;
  }
}
</style>
